/* ============================================================
   Maestro — app-wide theming. Single source of truth.
   Swap static/img/bg1.jpg to retheme the entire app: every
   shell and standalone page sets --app-bg to that one file.
   ============================================================ */

/* App-wide background — a fixed, full-viewport cover layer.
   Mobile-safe by design: a position:fixed pseudo-element rather
   than background-attachment:fixed (which janks / repaints on
   every scroll frame on iOS Safari and most mobile browsers).
   Sized to 100dvh so the dynamic mobile URL bar can't leave a gap. */
.app-bg::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    z-index: -1;
    background: var(--app-bg) center / cover no-repeat;
}

/* Standardised header treatment — headers and labels that sit directly on the
   background go white with a soft drop shadow so they pop on the gradient
   without a box. text-shadow inherits, so setting it on a wrapper covers the
   heading + subtitle within it; pair with Tailwind's text-white on the text. */
.app-on-bg {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}