/* The shared screen header (owner's spec 2026-10-23, src/wizard/ScreenHeader.tsx): Profile | center | page button,
   4px under the safe area, 16px from the sides; the page starts 14px under it. 2026-10-23 pm: 40px circles (his +10% on 36), no ring,
   the row sticks to the top and only the Profile circle stays while the page scrolls (the rest fades past 24px). */

/* Web look of a circle: the app's one glass surface (atlas-colors.css --glass + the blur the Budget island, the Net
   Worth chart card and the Ask Atlas tray share), no border, a soft shadow. On the phone the circle is REAL Liquid
   Glass: AppDelegate.swift draws a glassEffect circle + the icon over each button (the "glasshdr" message, every
   frame) and acks with html.nativehdr, which hides the web circle and icon; the tap still lands on the web button. */
:root {
  --sh-glass: var(--glass, rgba(255, 255, 255, 0.32));
  --sh-blur: blur(18px) saturate(1.2);
  --sh-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.sh { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; margin: 0 -16px 14px; padding: calc(4px + env(safe-area-inset-top, 0px)) 16px 0; position: sticky; top: 0; z-index: 5; }
.sh-btn { width: 40px; height: 40px; border-radius: 20px; border: none; margin: 0; padding: 0; display: grid; place-items: center; position: relative; color: #1C1C1E; background: var(--sh-glass); -webkit-backdrop-filter: var(--sh-blur); backdrop-filter: var(--sh-blur); box-shadow: var(--sh-shadow); cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, opacity .2s ease; }
.sh-btn::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; } /* a 44pt tap area around the 40px circle */
.sh-btn:active { transform: scale(.94); }
.sh-btn svg { display: block; }
.sh-c { min-width: 0; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease; }
.sh-sp { width: 40px; height: 40px; }

/* scrolled past 24px (index.html toggles html.shslim): only the Profile circle stays; Ask Atlas keeps both buttons */
html.shslim .sh .sh-c, html.shslim .sh .sh-btn:not([data-sh="profile"]) { opacity: 0; pointer-events: none; }
.coachHdr .sh .sh-c, .coachHdr .sh .sh-btn { opacity: 1 !important; pointer-events: auto !important; }

/* the phone draws the circles natively: the web circle and its icon step out of sight, the button keeps the tap */
html.nativehdr .sh-btn { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.nativehdr .sh-btn svg, html.nativehdr .sh-btn .be-belldot { visibility: hidden; }

/* the header carries the safe area now: the page wrap no longer pads the top on these tabs */
body[data-tab="goals"] .wrap, body[data-tab="budget"] .wrap, body.hzland[data-tab="home"] .wrap { padding-top: 0; }

/* Housing: the landing wears the header; the old top bar (hamburger) is gone there. The calculator keeps only its
   back chevron: no Profile circle on a sub-page (his word 2026-10-23); the roadmap page already hides the bar. */
body.hzland .topbar { display: none !important; }
body[data-tab="home"] #menuBtn, body[data-under="home"] #menuBtn { display: none !important; }