/* ONE horizontal page gutter for every tab, in every shell (spec_tidy_up §2, 4 Oct 2026).
   The SHELL's #page-content pads the sides — app.html, dashboard.html and demo.html all load this file — and
   page fragments NEVER add their own side padding. Before this, three tabs sat flush to the screen edge in the
   app (Your lifts, Body, Recovery) while four padded themselves, which doubled to 32px on the web dashboard.
   Safe-area aware: in landscape the notch side gets the larger of the gutter and the inset.
   The gutter is a variable so a shell can widen it (the desktop dashboard uses 32px).
   An element meant to touch the screen edge says so explicitly: class="hp-bleed" (or the same calc). */
:root { --page-gutter: 16px; }
#page-content {
  padding-left: max(var(--page-gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right, 0px));
}
.hp-bleed {
  margin-left: calc(-1 * max(var(--page-gutter), env(safe-area-inset-left, 0px)));
  margin-right: calc(-1 * max(var(--page-gutter), env(safe-area-inset-right, 0px)));
}