/* Screen-size rules the main stylesheet (app.css) was missing.
   They were added to the page on Oct 18 (phone layout) but never built into app.css,
   so desktop got the stacked phone layout. Breakpoints: xs 475px, sm 640px, md 768px, lg 1024px. */

@media (min-width: 475px) {
  .xs\:inline { display: inline; }
  .xs\:inline-block { display: inline-block; }
}

@media (min-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:inline { display: inline; }
  .sm\:px-3 { padding-left: .75rem; padding-right: .75rem; }
  .sm\:px-3\.5 { padding-left: .875rem; padding-right: .875rem; }
  .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
  .sm\:py-3\.5 { padding-top: .875rem; padding-bottom: .875rem; }
  .sm\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
  .sm\:pb-4 { padding-bottom: 1rem; }
  .sm\:p-2 { padding: .5rem; }
  .sm\:p-4 { padding: 1rem; }
  .sm\:p-6 { padding: 1.5rem; }
  .sm\:gap-2 { gap: .5rem; }
  .sm\:gap-2\.5 { gap: .625rem; }
  .sm\:gap-3\.5 { gap: .875rem; }
  .sm\:gap-4 { gap: 1rem; }
  .sm\:w-4 { width: 1rem; }
  .sm\:h-4 { height: 1rem; }
  .sm\:w-6 { width: 1.5rem; }
  .sm\:h-6 { height: 1.5rem; }
  .sm\:w-9 { width: 2.25rem; }
  .sm\:h-9 { height: 2.25rem; }
  .sm\:w-11 { width: 2.75rem; }
  .sm\:h-11 { height: 2.75rem; }
  .sm\:w-12 { width: 3rem; }
  .sm\:h-12 { height: 3rem; }
  .sm\:min-w-\[140px\] { min-width: 140px; }
  .sm\:min-h-\[140px\] { min-height: 140px; }
  .sm\:max-h-\[90vh\] { max-height: 90vh; }
  .sm\:max-h-\[92vh\] { max-height: 92vh; }
  .sm\:rounded-2xl { border-radius: 1rem; }
  .sm\:rounded-\[2rem\] { border-radius: 2rem; }
  .sm\:rounded-\[2\.2rem\] { border-radius: 2.2rem; }
  .sm\:rounded-\[2\.5rem\] { border-radius: 2.5rem; }
  .sm\:text-xs { font-size: .75rem; line-height: 1.3333; }
  .sm\:text-base { font-size: 1rem; line-height: 1.5; }
  .sm\:text-xl { font-size: 1.25rem; line-height: 1.4; }
  .sm\:text-2xl { font-size: 1.5rem; line-height: 1.3333; }
  .sm\:text-\[10px\] { font-size: 10px; }
  .sm\:top-5 { top: 1.25rem; }
  .sm\:right-5 { right: 1.25rem; }
  .sm\:bottom-6 { bottom: 1.5rem; }
  .sm\:right-6 { right: 1.5rem; }
}

@media (min-width: 768px) {
  .md\:inline { display: inline; }
}

@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:hidden { display: none; }
  .lg\:h-\[calc\(100vh-62px\)\] { height: calc(100vh - 62px); }
  .lg\:max-h-\[calc\(100vh-62px\)\] { max-height: calc(100vh - 62px); }
  .lg\:overflow-hidden { overflow: hidden; }
}

/* Small label so you can tell which copy of the site you are on */
.site-env-badge { position: fixed; bottom: 6px; right: 8px; z-index: 9999; padding: 2px 8px; border-radius: 999px; background: rgba(34, 197, 94, .35); color: #14532d; font: 700 10px/1.4 system-ui, sans-serif; opacity: .8; user-select: text; -webkit-user-select: text; cursor: text; }