/* Full-width, compact public beta banner. Shared by all three experiences.
 * The generated app styles set body { display:flex }; override that layout
 * on these pages so the banner sits ABOVE the app, not BESIDE it.
 */
html { min-width: 0; }
body.tml-public-testing-page {
  display: block !important;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}
body.tml-public-testing-page > #root {
  width: 100%;
  min-width: 0;
}
.tml-testing-notice {
  display: block;
  clear: both;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  background: #194635;
  color: #fff9ec;
  border-bottom: 2px solid #f3bb72;
  font-family: 'DM Sans', 'Nunito', system-ui, sans-serif;
  position: relative;
  z-index: 100;
}
.tml-testing-notice *, .tml-testing-notice *::before, .tml-testing-notice *::after {
  box-sizing: border-box;
}
.tml-testing-notice__inner {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  min-height: 46px;
  padding: 8px 16px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.tml-testing-notice__tag {
  flex: 0 0 auto;
  color: #194635;
  background: #ffdca6;
  border-radius: 999px;
  padding: 6px 10px;
  letter-spacing: .055em;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}
.tml-testing-notice p {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #fff9ec;
}
@media (max-width: 650px) {
  .tml-testing-notice__inner {
    justify-content: flex-start;
    min-height: 54px;
    padding: 9px 10px;
    gap: 9px;
  }
  .tml-testing-notice__tag {
    font-size: 9px;
    padding: 5px 7px;
    letter-spacing: .02em;
  }
  .tml-testing-notice p {
    font-size: 11px;
    line-height: 1.25;
  }
}