/* styles/phone-g4.css — phone pages group 4 (Generate, Canvas, Edit Plan, Script; 6 Oct 2026): the parts the
   four pages share. Hugo's mockups give each page a big display title under the app bar, then its panels.
   Phone tier only (body[data-ui-tier="s"]), skin tokens only, the kit's scale (styles/phone-kit.css). */

/* the page: the kit's opaque scroller (.pk-page); these four pages draw their own panels, so the body gutter
   lives on the panels' parent */
body[data-ui-tier="s"] .pg4-page { gap: var(--pk-3); padding-left: var(--pk-gutter); padding-right: var(--pk-gutter); }
/* nothing in the page shrinks to fit the screen (a sideways row is a scroll box, whose min height is 0) */
body[data-ui-tier="s"] .pg4-page > * { flex-shrink: 0; }
/* (the page's name: the shell's project band carries it as its eyebrow - pages draw no heading of their own) */
body[data-ui-tier="s"] .pg4-page { padding-top: var(--pk-3); }
/* a panel: lighter than the page (Hugo: panels read lighter than their parent), one radius, one border */
body[data-ui-tier="s"] .pg4-panel {
  display: flex; flex-direction: column; gap: var(--pk-3); min-width: 0;
  padding: var(--pk-3) var(--pk-3); border: 1px solid var(--card-border); border-radius: var(--pk-radius-card);
  background: var(--card-bg-solid);
}