/*
 * Page frame for Products' standalone console (ui/catalogue-standalone.js):
 * the sign-in and venue card, its messages, and the workspace width. The card and
 * header are the shared gk-access-card and gk-admin-header, the buttons are gk-button
 * and the message is gk-alert. Every value is a token from tokens-shared.css or
 * admin-foundation.css.
 */
body { min-width: 320px; }

.gk-skip-link:not(:focus) {
  position: absolute;
  left: -9999px;
}

/* No rail is shown until a venue is open, so the frame gives its width to the card. */
body.admin-shell-auth-prompt .admin-body {
  --admin-shell-rail-reserve: 0px;
  grid-template-columns: 0 minmax(0, 1fr);
}
body.admin-shell-auth-prompt .admin-main { max-width: 76rem; margin: auto; }

.admin-main { max-width: none; margin: 0; }
#page:focus { outline: none; }

#auth-message { display: block; max-width: 76rem; margin: 0 0 var(--space-xl); }

#auth-screen { min-height: calc(100dvh - var(--admin-header-h) - var(--space-5xl)); }
#auth-screen .auth-card { width: min(100%, 34rem); max-width: 34rem; margin: 0; text-align: center; }
.auth-actions { display: grid; gap: var(--space-md); text-align: left; }
#sso-label { display: grid; gap: var(--space-xs); text-align: left; }
#auth-screen .au-venue-list { max-width: none; }
#venue-list { margin-bottom: var(--space-xl); }
#venue-limit { color: var(--text-muted); }
#sign-out:not([hidden]) { display: block; width: max-content; margin: var(--space-md) auto 0; }

#change-venue:not([hidden]) { display: inline-flex; white-space: nowrap; }
.admin-header-right { margin-inline-start: auto; min-width: 0; flex: 0 1 auto; }

@media (max-width: 720px) {
  #change-venue:not([hidden]) { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 640px) {
  #auth-message { margin-inline: var(--space-2xl); }
  #auth-screen { padding-inline: var(--space-2xl); }
}