/* RGP / NRGP screens (rgp.js). Every control is a UI kit piece; this file only makes
   each screen a column at least one screen tall, so the kit's action bar
   (QCUI.actionBar({ end: true })) sits on the bottom edge — sticky while a long screen
   scrolls, at the bottom of a short one, where the assistant pill is lifted clear of it
   (qc-ui-flow.css). Nothing here sets a colour or a size the kit owns. */
#rgpRoot-my, #rgpRoot-new, #rgpRoot-pass, #rgpRoot-gate, #rgpRoot-incoming, #rgpRoot-all, #rgpRoot-settings {
  display: flex; flex-direction: column; min-height: calc(100dvh - 64px);
}
/* The Settings bar is redrawn into this holder; `contents` makes the holder no box of
   its own, so the bar is a child of the screen column — a sticky element only sticks
   inside its parent, and a one-bar-high parent would never let it. */
#rgpSetBar { display: contents; }

/* The gate as a Station Mode tile (station.html): the tablet's scrolling body is the
   column the screen fills, so the Let out bar sits on its bottom edge and sticks there
   while a long pass scrolls — the page itself never scrolls on a kiosk. */
.st-body:has(> .blocks > .st-rgp) { display: flex; flex-direction: column; }
.st-body:has(> .blocks > .st-rgp) > .blocks { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; }
#rgpRoot-gate.st-rgp { flex: 1 0 auto; min-height: 0; }

/* Settings → Workflow: one step of a flow (design reference rgp.html §8). A laptop reads it on
   one line — number · step · who · who exactly · remove; a phone puts number · step · remove
   first and who / who exactly under the step. Layout only; every control is a kit piece. */
.rgp-wfstep { display: grid; gap: .6rem .75rem; align-items: center;
  grid-template-columns: 28px minmax(150px, 1fr) minmax(170px, .9fr) minmax(220px, 1.5fr) 40px; }
@media (max-width: 720px) {
  .rgp-wfstep { grid-template-columns: 28px minmax(0, 1fr) 40px; }
  .rgp-wfstep > .qcui-stepno { grid-column: 1; grid-row: 1; }
  .rgp-wfstep > .rgp-wf-label { grid-column: 2; grid-row: 1; }
  .rgp-wfstep > .rgp-wf-del { grid-column: 3; grid-row: 1; }
  .rgp-wfstep > .rgp-wf-who { grid-column: 2 / 4; grid-row: 2; }
  .rgp-wfstep > .rgp-wf-detail { grid-column: 2 / 4; grid-row: 3; }
  .rgp-wfstep + .rgp-wfstep { border-top: 1px dashed var(--pg-border, #e4e4e7); padding-top: .6rem; }
}