/* Shared embed layout for Romy demos inside the marketing site iframe */

html.romy-embed {
  overflow-x: hidden;
}

html.romy-embed body {
  overflow-x: hidden;
  max-width: 100%;
  padding: 10px 12px 28px !important;
}

html.romy-embed .wrap {
  max-width: 100% !important;
  width: 100%;
}

html.romy-embed #romy-demo-banner {
  font-size: 8px !important;
  padding: 6px 10px !important;
  line-height: 1.4;
}

html.romy-embed .top {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 12px !important;
}

html.romy-embed .top-right,
html.romy-embed .chip {
  align-self: flex-start !important;
  align-items: flex-start !important;
  text-align: left;
}

html.romy-embed .brand h1 {
  font-size: 18px !important;
}

html.romy-embed .kpis {
  flex-direction: column;
  align-items: stretch !important;
}

html.romy-embed .hero {
  width: 100% !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  border-right: 0 !important;
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--hair);
}

html.romy-embed .heroval {
  font-size: clamp(48px, 14vw, 72px) !important;
}

html.romy-embed .ledger {
  width: 100%;
  flex-direction: column;
}

html.romy-embed .led {
  min-width: 0 !important;
  width: 100%;
  border-left: 0 !important;
  padding-left: 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}

html.romy-embed .led:first-child {
  border-top: 0;
  padding-top: 0;
}

html.romy-embed .led .lv {
  font-size: 22px !important;
}

html.romy-embed .grid,
html.romy-embed .charts,
html.romy-embed .patterns,
html.romy-embed .ev,
html.romy-embed .sim,
html.romy-embed .mods {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}

html.romy-embed .drow,
html.romy-embed .mbar,
html.romy-embed .bar {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

html.romy-embed .drow .dv,
html.romy-embed .mbar .mv,
html.romy-embed .bar .bv {
  text-align: left !important;
}

html.romy-embed .track,
html.romy-embed .mtrack {
  width: 100%;
}

html.romy-embed .pat,
html.romy-embed .mod {
  border-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html.romy-embed .pat:not(:first-child),
html.romy-embed .mod:nth-child(even) {
  padding-left: 0 !important;
}

html.romy-embed .mod:nth-child(odd) {
  border-right: 0 !important;
}

html.romy-embed .card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

html.romy-embed table {
  min-width: 520px;
}

html.romy-embed thead th,
html.romy-embed tbody td {
  padding-right: 10px !important;
  font-size: 11px !important;
}

html.romy-embed .row {
  flex-wrap: wrap;
  align-items: flex-start !important;
  gap: 10px !important;
}

html.romy-embed .row .who {
  width: 100%;
  flex: 1 1 100% !important;
}

html.romy-embed .row .who .nm,
html.romy-embed .row .who .rl {
  white-space: normal !important;
}

html.romy-embed .assets {
  flex-wrap: wrap;
  width: 100%;
  gap: 8px !important;
}

html.romy-embed .cost {
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

html.romy-embed .cost .br {
  width: 100% !important;
  max-width: 100%;
  margin-left: 0 !important;
}

html.romy-embed .assume {
  flex-direction: column;
  align-items: stretch !important;
  gap: 20px !important;
}

html.romy-embed .swatches {
  margin-left: 0 !important;
}

html.romy-embed .field input[type="range"] {
  width: 100%;
  max-width: 100%;
}

html.romy-embed .donut-wrap {
  flex-direction: column;
  align-items: flex-start !important;
}

html.romy-embed .grid {
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
}

html.romy-embed .col {
  border-right: 0 !important;
  border-bottom: 1px solid var(--hair);
  min-height: 0;
}

html.romy-embed .col:last-child {
  border-bottom: 0;
}

html.romy-embed .rail {
  display: flex !important;
}

html.romy-embed .people {
  max-height: 200px;
}

html.romy-embed.romy-teams body {
  padding: 0 !important;
}

html.romy-embed.romy-teams .teams-shell {
  border-radius: 0;
  min-height: 380px;
}

html.romy-embed.romy-teams .stream {
  min-height: 120px;
  max-height: 220px;
}

html.romy-embed.romy-teams .teams-rail {
  display: none;
}

@media (min-width: 520px) {
  html.romy-embed.romy-teams .teams-rail {
    display: flex;
  }
}

html.romy-embed .msg {
  max-width: 100% !important;
}

html.romy-embed .asyou {
  display: none;
}

html.romy-embed .chat-hd {
  flex-wrap: wrap;
}

html.romy-embed .flow {
  border-left: 0 !important;
  padding-left: 0 !important;
  min-height: 0 !important;
}

html.romy-embed .act .row {
  grid-template-columns: 24px 1fr !important;
}

html.romy-embed .act .row .scope {
  grid-column: 2;
  text-align: left !important;
  white-space: normal !important;
  margin-top: 6px;
}

html.romy-embed footer,
html.romy-embed .foot {
  font-size: 10px !important;
  margin-top: 28px !important;
}

html.romy-embed h2.section,
html.romy-embed h2.sec {
  margin-top: 28px !important;
  font-size: 10px !important;
}